<script setup lang="ts">
import { computed, reactive, ref } from 'vue'

interface ListObjType {
  id: number;
  title: string;
  isChoose: boolean
}

const list = reactive<ListObjType[]>([{ id: 0, title: '吃饭', isChoose: false }, {
  id: 1,
  title: '睡觉',
  isChoose: false
}])
const inputValue = ref<string>('')


let ok = computed(() => {
  return list.filter(item => item.isChoose).length
})

// 选中状态改变
function changeChecked(item: ListObjType) {
  item.isChoose = !item.isChoose
}

// 删除
function del(i: number) {
  // 从当前索引开始删除 删除数量为1个 改变当前数组
  list.splice(i, 1)
}

// 添加任务的方法
function add() {
  // 在添加之前 做一个非空判断 防止添加空项目
  if (inputValue.value === '') {
    alert('表单项不能为空')
    return
  }
  // 将数组的最后一项设置为可选 表示 当问号前面的值为空或者undefined的时候 就不需要了 直接从0开始
  list.push({
    id: list[list.length - 1]?.id + 1 || 0,
    title: inputValue.value,
    isChoose: false
  })
  // 将输入框置空
  inputValue.value = ''
}

</script>

<template>
  <p>共有{{ list.length }}条数据</p>
  <p>有{{ ok }}条已完成</p>
  <input type="text" v-model="inputValue">
  <button @click="add">添加</button>
  <ul>
    <li v-for="(item,index) in list" :key="item.id">
      <input type="checkbox" :checked="item.isChoose" @change="changeChecked(item)">
      <span :class="item.isChoose?'del':''">{{ item.title }}</span>
      <button @click="del(index)">删除</button>
    </li>
  </ul>
</template>

<style scoped>
ul {
  list-style: none;

  .del {
    text-decoration: line-through;
  }
}
</style>
